<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script src="./js/jquery-1.9.1.js"></script>
<script src="./ibchart/ibchartinfo.js"></script>
<script src="./ibchart/ibchart.js"></script>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				
				Type : "column",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
			Credits : {
				Enabled:false
			},
			
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			
		    Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정,
		    },
		    
		    XAxis : {
		        TickInterval : 1
		    },
			
// 		    YAxis : {
// 		        LineColor : "#7F7F7F",
// 		        TickInterval : 50,
// 				GridLineDashStyle : "solid",
// 		        GridLineWidth : 1,
// 		        GridLineColor : "#C4C9CD",
// 		        LineWidth : 1,
// 		        Title : {
// 		            Text : ""
// 		        }
// 		    }
		    
		    YAxis : [
		    	{
		    		Title : {
	 		            Text : "Y축 1번"
	 		        },
	 		        Opposite:0
		    	},
		    	{
		    		Title : {
	 		            Text : "Y축 2번"
	 		        },
	 		        Opposite:1
		    	}
		    ]
		}
		
		myChart.SetOptions(cfg);
		
		
		
// 		var data0	= "[{"
// 					+ "Name : '성장률',"
// 					+ "Type:'line', zIndex:3,"
// 					+ "Data : [ {Y:10},{Y:32},{Y:15},{Y:53},{Y:18},{Y:22} ],"
// 					+ "DataLabels:{ Enabled:true },"
// 					+ "},{"
// 					+ "Name : '판매량',"
// 					+ "Type:'column', zIndex:1,"
// 					+ " Data : [ {Y:580},{Y:100},{Y:700},{Y:400},{Y:600},{Y:509}   ],"
// 					+ "DataLabels:{ Enabled:true },"
// 					+ " YAxis:1"
// 					+ "}]";
		
// 		myChart.GetDataJsonString(data0);
		
		myChart.SetSeriesOptions([{
            Name : "성장률",
            Type:"line", zIndex:3,
            Data : [ {Y:10},{Y:32},{Y:15},{Y:53},{Y:18},{Y:22} ],
            DataLabels:{ Enabled:true },
		},{
            Name : "판매량",
            Type:"column", zIndex:1,
            Data : [ {Y:580},{Y:100},{Y:700},{Y:400},{Y:600},{Y:509} ],
            DataLabels:{ Enabled:true },
            YAxis:1
		}], 1);
		
// 		myChart.DoSearch("data.json");
		myChart.Draw();
// 		myChart.GetDataJsonString([{
//             Name : "성장률",
//             Type:"line", zIndex:3,
//             Data : [ {Y:10},{Y:32},{Y:15},{Y:53},{Y:18},{Y:22} ],
//             DataLabels:{ Enabled:true },
// 		},{
//             Name : "판매량",
//             Type:"column", zIndex:1,
//             Data : [ {Y:580},{Y:100},{Y:700},{Y:400},{Y:600},{Y:509}   ],
//             DataLabels:{ Enabled:true },
//             YAxis:1
// 		}]);
		
	});
	
</script>
<title>차트 JSON 예제</title>
</head>
<body>
<div id="main">
	<h2>차트 JSON 예제</h2>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>